<template>
	<el-form class="base-form-container" ref="form" :label-position="config.labelPosition || 'right'"
		:label-width="(config.labelWidth || 80) + 'px'" :size="config.size || 'default'">
		<slot name="prefix"></slot>
		<el-form-item v-for="(item, i) of innerFormItems" :key="i" :label="item.label"
			:class="{ 'form-item__require': item.validator || item.required }">
			<el-row style="width: 100%">
				<el-col :span="item.span || 24">
					<template v-if="item.render">
						<FormRender :render="item.render" :form-item="item" />
					</template>
					<template v-else>
						<el-input v-if="item.type === 'input' && !item.hidden" v-model="item.value"
							:placeholder="item.placeholder || '请输入内容'" :size="config.size || 'default'" clearable
							:disabled="item.disabled || false" :type="item.inputType || ''" :maxlength="item.maxLength"
							:rows="item.rows || 5" class="form-item" />
						<el-select v-else-if="item.type === 'select' && !item.hidden" v-model="item.value"
							:placeholder="item.placeholder || '请选择条目'" :size="config.size || 'default'"
							:filterable="item.filterable ? true : false" clearable :disabled="item.disabled || false"
							style="width: 100%" class="form-item"
							@change="item.onChange ? item.onChange(item.value, item.associatedOption || '') : () => { }">
							<el-option v-for="optionItem in item.selectOptions" :key="optionItem.value"
								:value="optionItem.value" :label="optionItem.label" />
						</el-select>
						<el-date-picker v-else-if="item.type === 'date-range' && !item.hidden" v-model="item.value"
							type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
							class="form-item" :disabled="item.disabled || false" style="width: 100%"
							:size="config.size || 'default'" />
						<el-date-picker v-else-if="item.type === 'date' && !item.hidden" v-model="item.value" type="date"
							:disabled="item.disabled || false" range-separator="-"
							:placeholder="item.placeholder || '请选择日期'" class="form-item" :size="config.size || 'default'" />
						<el-date-picker v-else-if="item.type === 'datetime' && !item.hidden" v-model="item.value"
							type="datetime" :disabled="item.disabled || false" :placeholder="item.placeholder || '请选择日期'"
							class="form-item" :size="config.size || 'default'" />
						<el-time-picker v-else-if="item.type === 'time' && !item.hidden" v-model="item.value" arrow-control
							:picker-options="{
								selectableRange: '00:00:00 - 23:59:59'
							}" :disabled="item.disabled || false" :placeholder="item.placeholder || '请选择时间'" class="form-item"
							:size="config.size || 'default'" />
						<el-radio-group v-if="item.type === 'radio-group' && !item.hidden" v-model="item.value"
							:disabled="item.disabled || false" :size="config.size || 'default'"
							@change="item.onChange ? item.onChange(item.value, item.associatedOption || '') : () => { }">
							<component :is="item.style === 'button' ? 'el-radio-button' : 'el-radio'"
								v-for="optionItem of item.radioOptions" :key="optionItem.value" :label="optionItem.value">
								{{ optionItem.label }}
							</component>
						</el-radio-group>
						<el-checkbox-group v-if="item.type === 'check-group' && !item.hidden" v-model="item.value"
							:disabled="item.disabled || false" :size="config.size || 'default'"
							@change="item.onChange ? item.onChange(item.value, item.associatedOption || '') : () => { }">
							<component :is="item.style === 'button' ? 'el-checkbox-button' : 'el-checkbox'"
								v-for="optionItem of item.checkOptions" :key="optionItem.value" :label="optionItem.value">
								{{ optionItem.label }}
							</component>
						</el-checkbox-group>
						<el-switch v-if="item.type === 'switch' && !item.hidden" v-model="item.value"
							:disabled="item.disabled || false" :size="config.size || 'default'"
							@change="item.onChange ? item.onChange(item.value, item.associatedOption || '') : () => { }"></el-switch>
					</template>
				</el-col>
			</el-row>
		</el-form-item>
		<slot name="extra"></slot>
	</el-form>
</template>

<script lang="ts">
import { useForm } from '@/hooks'
import { computed, defineComponent, getCurrentInstance, onMounted, PropType, watch } from 'vue'
import { FormRenderItem } from './FormRender'
export default defineComponent({
	name: 'BaseForm',
	props: {
		config: {
			type: Object,
			default: () => {
				return {
					size: 'default',
					labelWidth: '80',
					labelPosition: 'right'
				}
			}
		},
		formItems: {
			type: Array as PropType<Array<FormRenderItem>>,
			default: () => {
				return []
			}
		}
	},
	setup(props, { expose }) {
		const { checkParams, resetParams, generatorParams } = useForm()
		const innerFormItems = computed(() => {
			return props.formItems
		})
		function mCheckParams() {
			return checkParams(innerFormItems.value)
		}
		function mResetParams() {
			return resetParams(innerFormItems.value)
		}
		function mGeneratorParams() {
			return generatorParams(innerFormItems.value)
		}
		expose({
			checkParams: mCheckParams,
			resetParams: mResetParams,
			generatorParams: mGeneratorParams
		})
		return {
			innerFormItems
		}
	}
})
</script>
<style lang="scss" scoped>
.form-item {
	width: 100%;
}
</style>
